<template>
  <el-dialog
    title="选择商品"
    :visible.sync="dialogVisibleShop"
    :before-close="handleClose"
    width="60%"
  >
    <div class="shopConditions">
      <div style="margin-bottom:20px;">
        搜索商品名称&emsp;
        <el-input
          v-model="searchs"
          size="small"
          style="width: 324px;"
        ></el-input
        >&emsp;
        <el-button type="primary" size="small" @click="searchTag('ss')"
          >搜索</el-button
        >
        <el-button size="small" @click="getList">取消</el-button>
      </div>
      <div>
        查询商品分类&emsp;
        <el-select
          v-model="searchOne"
          size="small"
          class="form-min-input"
          placeholder="请选择"
          @change="selectOneTag"
        >
          <el-option
            v-for="item in oneArr"
            :key="item.type_id"
            :label="item.type_name"
            :value="item.type_id"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="searchTwo"
          size="small"
          class="form-min-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in twoArr"
            :key="item.type_id"
            :label="item.type_name"
            :value="item.type_id"
          >
          </el-option> </el-select
        >&emsp;
        <el-button type="primary" size="small" @click="searchTag('cx')"
          >查询</el-button
        >
      </div>
    </div>
    <div class="shopList">
      <div class="shopList-box">
        <div
          v-for="(item, index) in shopList"
          :key="index"
          :style="item.check ? 'border-color:#409EFF' : ''"
          class="shopList-chlid"
          @click.stop="shopTap(item)"
        >
          <div class="shopList-chlid-img">
            <img
              :src="
                $store.state.qiniu +
                  item.goods_cover.split(',')[0] +
                  $store.state.imgRotate
              "
              width="100%"
              height="100%"
            />
          </div>
          <div class="shopList-chlid-font">
            <div class="one">
              {{ item.goods_name }}
            </div>
            <div class="two">
              <span v-if="item.low_goods_price == item.up_goods_price"
                >￥{{ item.low_goods_price }}</span
              >
              <span v-else
                >￥{{ item.low_goods_price }} - ￥{{
                  item.up_goods_price
                }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        :page-size="12"
        layout="prev, pager, next"
        :total="totals"
        style="margin-top:20px;text-align: center;"
        @current-change="changes"
      >
      </el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click.stop="shopSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { GOODSLIST, GETLIST } from "@/service/shop";
var _ = require("lodash");
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisibleShop: false,
      totals: 0,
      pages: 1,
      shopList: [],
      searchs: "",
      typeShop: "",
      searchOne: "",
      searchTwo: "",
      oneArr: [],
      twoArr: [],
      searchsName: "",
      shopDataList: []
    };
  },
  watch: {
    dialogVisible(v) {
      this.dialogVisibleShop = v;
      if (v) {
        this.shopDataList = _.cloneDeep(this.dataJson.shopDataList);
        this.typeShop = _.cloneDeep(this.dataJson.typeShop);
        this.getList();
      }
    }
  },
  methods: {
    selectOneTag(item) {
      this.searchTwo = "";
      this.oneArr.forEach(ele => {
        if (ele.type_id === item) {
          this.twoArr = ele.second;
        }
      });
    },
    shopTap(e) {
      e.check = !e.check;
      if (e.check) {
        switch (this.typeShop) {
          case 1:
            this.shopDataList.push(e);
            break;
          case 2:
            if (this.shopDataList.length < 4) {
              this.shopDataList.push(e);
            } else {
              e.check = !e.check;
              this.$message.error("最多只能选4种");
            }
            break;
          case 3:
            if (this.shopDataList.length < 6) {
              this.shopDataList.push(e);
            } else {
              e.check = !e.check;
              this.$message.error("最多只能选6种");
            }
            break;
        }
      } else {
        let arr = this.shopDataList;
        arr.forEach((ele, idx) => {
          if (ele.goods_id === e.goods_id) {
            arr.splice(idx, 1);
          }
        });
      }
    },
    shopSumbit() {
      let arr = _.cloneDeep(this.shopDataList);
      this.shopDataList.forEach(ele => {
        arr.push(ele);
      });
      arr = this.unique(arr);
      this.$emit("close", arr);
      this.dialogVisibleShop = false;
    },
    unique(arr) {
      let resA = {};
      let resB = [];
      arr.forEach(ele => {
        resA[ele.goods_id] = ele;
      });
      for (let key in resA) {
        resB.push(resA[key]);
      }
      return resB;
    },
    handleClose() {
      this.dialogVisibleShop = false;
      this.$emit("close");
    },
    async changes(page) {
      this.pages = page;
      if (
        this.searchOne !== "" ||
        this.searchTwo !== "" ||
        this.searchs !== ""
      ) {
        let param = {
          flag: "exclusive",
          page: this.pages,
          pageshow: 12
        };
        if (this.searchsName === "ss") {
          this.searchOne = "";
          this.searchTwo = "";
          param.goods_name = this.searchs;
        } else {
          this.searchs = "";
          param.goods_type = this.searchTwo || this.searchOne;
        }
        await GOODSLIST(param).then(({ code, data, msg }) => {
          if (code === 200) {
            this.totals = data.length;
            this.shopList = data.list;
          } else {
            this.$message.error(msg);
            this.shopList = [];
          }
        });
      } else {
        this.getList();
      }
    },
    async searchTag(name) {
      this.searchsName = name;
      this.pages = 1;
      let param = {
        flag: "exclusive",
        pages: this.pages,
        pageshow: 12
      };
      let soft;
      if (name === "ss") {
        this.searchOne = "";
        this.searchTwo = "";
        param.goods_name = this.searchs;
        if (this.searchs !== "") {
          soft = true;
        }
      } else {
        this.searchs = "";
        param.goods_type = this.searchTwo || this.searchOne;
        if (this.searchOne !== "" || this.searchTwo !== "") {
          soft = true;
        }
      }
      if (soft) {
        await GOODSLIST(param).then(({ code, data, msg }) => {
          if (code === 200) {
            this.totals = data.length;
            this.shopList = data.list;
          } else {
            this.$message.error(msg);
            this.shopList = [];
          }
        });
      }
    },
    async getList(flag) {
      this.shopList = [];
      this.searchs = "";
      this.searchOne = "";
      this.searchTwo = "";
      await GOODSLIST({ flag, page: this.pages, pageshow: 12 }).then(
        ({ code, data }) => {
          if (code === 200) {
            let arr;
            data.list.forEach(e => {
              e.check = false;
              e.goods_cover = e.goods_cover.split(",")[0];
              arr = this.shopDataList;
              if (arr) {
                arr.forEach(ele => {
                  if (ele.goods_id === e.goods_id) {
                    e.check = true;
                  }
                });
              }
            });
            this.totals = data.length;
            this.shopList = data.list;
          }
        }
      );
      await GETLIST().then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.oneArr = data;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.shopConditions {
  width: 100%;
  height: 140px;
  border-radius: 10px 10px 0 0;
  border: 10px solid #f2f2f2;
  padding: 20px 0 0 20px;
  box-sizing: border-box;
}
.shopList {
  height: 390px;
  border-radius: 0 0 10px 10px;
  border: 10px solid #f2f2f2;
  margin-top: -10px;
  box-sizing: border-box;
  .shopList-box {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    height: 300px;
    .shopList-chlid {
      width: 22%;
      height: 90px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 10px;
      margin: 10px 10px 0 0;
      padding: 10px 0 0 10px;
      .shopList-chlid-img {
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 10px;
        float: left;
      }
      .shopList-chlid-font {
        width: 50%;
        height: 70px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        .one {
          width: 100%;
          height: 38px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .two {
          width: 100%;
          height: 26px;
          line-height: 26px;
          color: #ff2525;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
